<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/main}">
<head>
    <th:block layout:include="nav :: head"></th:block>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.revoke-link').click(function(e) {
                e.preventDefault();
                var clientId = $(this).attr('data-client-id');
                $('#'+clientId+'-scrim').show();
            });

            $('.revocation-cancel').click(function(e) {
                e.preventDefault();
                $(this).parents('.revocation-scrim').hide();
            });
        });
    </script>
</head>
<div layout:fragment="page-nav">
    <th:block layout:replace="nav :: nav"></th:block>
</div>
<div class="panel-container" layout:fragment="page-content">
    <div class="panel">
        <div th:if="${param.success_message_code}" class="alert alert-success">
            <p th:text="#{${param.success_message_code[0]}}">Success Message</p>
        </div>
        <div th:if="${param.error_message_code}" class="alert alert-error">
            <p th:text="#{${param.error_message_code[0]}}">Error Message</p>
        </div>
        <h1>Account Settings</h1>
        <div class="panel-content">
            <h2>Profile</h2>
            <p class="profile">
                <span class="email" th:text="|${email}|">user@example.com</span><a href="/change_email" th:href="@{/change_email}" th:if="${isUaaManagedUser}">Change Email</a>
                <span class="password">********</span><a href="/change_password" th:href="@{/change_password}" th:if="${isUaaManagedUser}">Change Password</a>
            </p>
            <h2>Third Party Access</h2>
            <p th:text="${approvals.size() > 0 ? 'These applications have been granted access to your account.' : 'You have not yet authorized any third party applications.'}">
                These applications have been granted access to your account.
            </p>
            <th:block th:each="client : ${approvals}">
                <form action="/profile" th:action="@{/profile}" method="POST"
                      th:id="${client.key} + '-form'" class="panel-content client-scopes">
                    <input type="hidden" name="clientId" th:value="${client.key}"/>
                    <div class="application-scopes">
                        <div class="application-label">
                            <h3 th:text="${clientnames[client.key]}">
                                Cloudbees
                            </h3><a href="#" th:href="|revoke?client=${client.key}|" th:attr="data-client-id=${client.key}" class="revoke-link">
                                Revoke Access
                            </a>
                        </div>
                        <ul>
                            <th:block th:each="approval, iter : ${client.value}" th:with="code=${'scope.' + approval.scope}">
                                <li>
                                    <input type="checkbox"
                                           name="checkedScopes"
                                           id="scope.0"
                                           th:id="|scope.${iter.index}|"
                                           th:value="|${approval.clientId}-${approval.scope}|"
                                           th:checked="${approval.status.toString() == 'APPROVED'}" />
                                    <label for="scope.0"
                                           th:for="|scope.${iter.index}|"
                                           th:text="${#messages.msgOrNull(code) ?: approval.description}">Something new.</label>
                                </li>
                            </th:block>
                        </ul>
                        <button type="submit" name="update" class="btn btn-primary">Update</button>
                        <div class="revocation-scrim" th:id="${client.key} + '-scrim'">
                            <div class="revocation-modal">
                                <div class="revocation-modal-header">
                                    <h3>Revoke Access</h3><div class="close-icon revocation-cancel">&#x2716;</div>
                                </div>
                                <p>
                                    Are you sure you want to revoke access to <th:block th:text="${clientnames[client.key]}">Cloudbees</th:block>?
                                </p>
                                <div class="revocation-actions">
                                    <button type="button" class="revocation-cancel btn btn-lowlight">Go Back</button>
                                    <button type="submit" class="revocation-confirm btn btn-primary" name="delete">Yes</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </th:block>
        </div>
    </div>
</div>
</html>